// 注意，el很多组件都可以通过class等方式向组件里注入class。
// 自定义的时候，尽量带着自己注入的class来限定样式选择器。
// 比如下面el-date-picker的样式修改，就用.custom-theme这个类来限定。
// 使用组件的时候，传入class="custom-theme"，popper-class="custom-theme"即可使用自定义定义的样式。
// 想用回原样式，不传即可。也可以再用其他自定义class来定义其他自定义样式。
@import '@/assets/styles/variables.scss';

// 全屏加载遮罩，directive方式加不了custom-class
.el-loading-mask.is-fullscreen {
  z-index: 5000 !important;
}

// TODO，这里还有几个样式是直接修改了原样式，如果知道是哪里的，尽可能按上面的说的方式修改过来。
.el-input--small.el-input--suffix .el-input__inner {
  padding-right: 25px;
  background: transparent;
  color: #00c0ff;
  border: none;
  border-bottom: 1px solid #00c0ff;
  border-radius: 3px;
}

.el-dialog__body {
  padding-top: 0px !important;
}

.el-dialog__headerbtn .el-dialog__close {
  font-size: xx-large !important;
}

.el-step.is-vertical .el-step__title {
  &:hover {
    cursor: pointer;
  }
}

// date-picker
.custom-theme.el-range-editor.el-input__inner {
  background: $el-date-picker-bg-color;
  box-shadow: 0 0 0 1px #2094b3;
  position: absolute;
  top: 0;
  bottom: 0;
  transform: translateY(40%);
  height: 40px;

  input {
    background: $el-date-picker-bg-color;
    color: #000;
    // border: 1px solid #e8e4e430;
  }

  .el-range-separator {
    color: #ffffff;
  }
}

// date-picker弹窗
.custom-theme {
  .el-date-table td.end-date .el-date-table-cell__text, .el-date-table td.start-date .el-date-table-cell__text {
    background-color: $el-date-picker-popper-start-end-bg-color !important;
  }
}

// date-picker弹窗
.custom-theme.el-picker__popper.el-popper[role=tooltip] {
  border: 1px solid $el-date-picker-border-color !important;
  background: $el-date-picker-popper-bg-color;
  .el-picker-panel.el-date-picker {
    background: $el-date-picker-popper-bg-color;
    .el-date-picker__header {
      .el-date-picker__header-label {
        color: #ffffff;
      }
      .el-icon {
        --color: #ffffff;
      }
    }
  }
  .el-picker-panel__content {
    background: $el-date-picker-popper-bg-color;
    .el-date-range-picker__header {
      div {
        color: #ffffff;
      }
      .el-icon {
        --color: #ffffff;
      }
    }
    .el-date-table {
      th {
        color: #ffffff;
      }
      .available {
        .el-date-table-cell__text {
          color: #ffffff;
        }
      }
      .in-range {
        .el-date-table-cell {
          background-color: $el-date-picker-popper-range-bg-color;
          &:hover {
            background-color: $el-date-picker-popper-range-hover-bg-color;
          }
        }
      }
    }
  }
}

// el-from
.custom-theme.el-form {
  .el-form-item {
    .el-form-item__label {
      color: $el-form-label-text-color;
    }
  }
}

// el-input
.custom-theme.el-input {
  .el-input__inner {
    color: $el-input-text-color;
    background-color: $el-input-bg-color;
  }
}

// el-select，本体
.custom-theme.el-select {
  .el-input__inner {
    color: $el-select-text-color;
    background-color: $el-select-bg-color;
  }
  .el-input__suffix {
    .el-icon {
      color: $el-select-text-color;
    }
  }
}

// el-select，下拉
.custom-theme.el-popper.el-select__popper[role=tooltip] {
  background-color: $el-select-popper-bg-color;
  border-color: $el-select-popper-border-color;
  &[data-popper-placement^=bottom] {
    .el-popper__arrow { // 那个烦人的小箭头的颜色
      &::before {
        border-top-color: $el-select-popper-border-color !important;
        border-left-color: $el-select-popper-border-color !important;
        background-color: $el-select-popper-bg-color !important;
      }
      &::after {
        border-bottom-color: $el-select-popper-border-color !important;
        border-right-color: $el-select-popper-border-color !important;
        background-color: $el-select-popper-bg-color !important;
      }
    }
  }
  &[data-popper-placement^=top] {
    .el-popper__arrow { // 那个烦人的小箭头的颜色
      &::before {
        border-bottom-color: $el-select-popper-border-color !important;
        border-right-color: $el-select-popper-border-color !important;
        background-color: $el-select-popper-bg-color !important;
      }
      &::after {
        border-top-color: $el-select-popper-border-color !important;
        border-left-color: $el-select-popper-border-color !important;
        background-color: $el-select-popper-bg-color !important;
      }
    }
  }
  .el-select-dropdown__item {
    color: $el-select-text-color;
    &.hover {
      background-color: $el-select-popper-bg-hover-color;
    }
    &.selected {
      color: $el-select-text-highlight-color;
    }
  }
}

// el-message-box
.custom-theme.el-message-box {
  background: linear-gradient(180deg, #112F2E 0%, #031E1D 100%);
  border: $case-report-border;
  border-image: $case-report-border-image;
  .el-message-box__header {
    .el-message-box__close {
      color: $case-report-normal-text-color;
    }
  }
  .el-message-box__content {
    color: $case-report-normal-text-color;
  }
  .el-message-box__btns {
    .custom-theme.el-button.cancel-btn {
      background-color: $case-report-cancel-btn-bg-color;
      color: $case-report-cancel-btn-text-color;
      border: 1px solid $case-report-cancel-btn-border-color;
    }
    .custom-theme.el-button.confirm-btn {
      background-color: $case-report-confirm-btn-bg-color;
      color: $case-report-confirm-btn-text-color;
      border: 1px solid $case-report-confirm-btn-border-color;
    }
  }
}

// el-radio
.custom-theme.el-radio {
  color: $el-common-label-text-color-1;
  &.is-checked {
    .el-radio__label {
      color: $el-common-label-text-color-1;
    }
    .el-radio__input {
      .el-radio__inner {
        background-color: $el-check-radio-checked-bg-color;
        &::after {
          background-color: $el-check-radio-checked-text-color;
        }
      }
    }
  }
  .el-radio__input {
    .el-radio__inner {
      background-color: $el-check-radio-bg-color;
      border: 1px solid $el-check-radio-border-color;
    }
  }
}

// el-radio-button
.custom-theme.el-radio-button {
  margin-right: 2px;
  .el-radio-button__inner {
    border: $el-common-border !important;
    border-radius: 4px !important;
    color: $el-btn-color;
    background-color: $el-btn-bg-color;
  }
  &.is-active {
    .el-radio-button__inner {
      color: $el-btn-active-color;
      background-color: $el-btn-bg-active-color;
    }
  }
}

// el-checkbox
.custom-theme.el-checkbox {
  color: $el-common-label-text-color-1;
  &.is-checked {
    .el-checkbox__label {
      color: $el-common-label-text-color-1;
    }
    .el-checkbox__input {
      .el-checkbox__inner {
        background-color: $el-check-radio-checked-bg-color;
        &::after {
          border-color: $el-check-radio-checked-text-color;
        }
      }
    }
  }
  .el-checkbox__input {
    .el-checkbox__inner {
      background-color: $el-check-radio-bg-color;
      border: 1px solid $el-check-radio-border-color;
    }
  }
}

// el-dialog
.custom-theme.el-dialog {
  background: $el-common-dialog-bg-color;
  border: $el-common-dialog-border;
  border-image: $el-common-dialog-border-image;
}

// el-dropdown
.custom-theme.el-dropdown__popper.el-popper[role=tooltip] {
  border: $el-common-border;
  .el-dropdown-menu {
    background: $el-common-bg;
    .el-dropdown-menu__item {
      color: $header-text-color;
      &:hover {
        background: $el-common-bg-hover;
      }
    }
  }
  .el-popper__arrow { // 那个烦人的小箭头的颜色
    &::before {
      border-top-color: $el-common-border-color !important;
      border-left-color: $el-common-border-color !important;
      background-color: $el-common-bg !important;
    }
  }
}

// 联动
.el-cascader{
  width: 100%;
}
.el-popper{
  .el-cascader-node.in-active-path,
  .el-cascader-node.is-active,
  .el-cascader-node.is-selectable.in-checked-path{
    color: #3aecff;
  }
  .el-cascader-menu{
    color: rgb(27 156 170);
  }
  .el-cascader-node:not(.is-disabled):focus, .el-cascader-node:not(.is-disabled):hover{
    background: #026a6a;
  }
  
} 